@import './commonM/_crumbs.less';
@import './commonM/_imgDetail.less';
@import './commonM/_infiniteScroll.less';

.sub-menu{
	display:none;
}
.title{
	position:relative;
	margin:0 0 15px 0;
	h3{
		font-size:18px;
		font-family: Roboto-Medium, Roboto;
		font-weight: 500;
		line-height:21px;
	}
	.attention{
		position:absolute;
		right:0;
		top:0;
		background:url('../images/index/mobile/favorite@3x.png');
		width:22px;
		height:22px;
		background-size:22px 22px;
		&.favorited{
			background:url('../images/index/mobile/favorited@3x.png');
			background-size:22px 22px;
		}
	}
}
.user{
	height:28px;
	line-height:28px;
	font-size:12px;
	display: flex;
	margin:0 0 15px 0;
	align-items: center;
	img{
		border-radius: 10px;
		width:28px;
		height:28px;
		margin:0 8px 0 0;
		display:inline-block;
	}
	.name{
		flex:1;
		display:inline-block;
		font-family:'Roboto-Regular';
	}
	.time{
		font-size: 11px;
		color: #999999;
	}
}
.abstract{
	font-size:12px;
	line-height:18px;
	margin-bottom:25px;
	font-family:'Roboto-Regular';
	position: relative;
	a{
		color:#177FE9;
	}
	&.div-ellipsis{
		max-height: 36px;
		overflow:hidden;
	    a{
	    	position:absolute;
	    	right:0;
	    	bottom:0;
	    	background-color:#fff;
	    	padding:0 0 0 20px;
	    }
	}
	p{
		margin: 0  0 18px 0;
	}
}
.attribute{
	border-radius: 20px;
	font-size: 14px;
	text-align: center;
	height: 36px;
	line-height: 36px;
	display: flex;
	overflow-x:scroll;
	margin: 0 0 25px 0;
	font-family:'Roboto-Medium';
	&::-webkit-scrollbar{
		width:0px;height:0px;
	}
	li{
		padding:0 18px;
		border-radius: 23px;
		border:1px solid #E4E4E4;
		margin-right:6px;
	}
	.current{
		background: #177FE9;
		color:#fff;
		a{
			color:#fff;
		}
		
	}
}
.current{
	.rank{
		display:block;
	}
}
.rank{
	margin:0 0 30px 0;
	&.animation{
		li{
			width: 0!important;
		}
	}
	li{
		font-size: 12px;
		font-weight: 500;
		font-family:'Roboto-Medium';
		margin: 0 0 10px 0;
		border-radius: 15px;
		height: 30px;
		font-size: 12px;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		line-height: 30px;
		padding: 0 0 0 12px;
		box-sizing:border-box;
		transition: width 1s;
		-moz-transition: width 1s; /* Firefox 4 */
		-webkit-transition: width 1s;
		&:nth-child(1){
			background-color: #FA3D5B;
		}
		&:nth-child(2){
			background-color: #CA53FF;
		}
		&:nth-child(3){
			background-color: #FFAA4A;
		}
		&:nth-child(4){
			background-color: rgba(23,127,233,0.66);
		}
		&:nth-child(4)~li{
			background-color: rgba(23,127,233,0.66);
		}
	}
}
.production{
	display: none;
	&.current{
		display: block;
	}
}
.production-detail{
	border-bottom:7px solid #F7F7F7;
	margin:0 -24px 30px;
	font-family:'Roboto-Regular';
	&.detail-ellipsis{
		.details{
			max-height: 120px;
		    overflow:hidden;
		}
	}
	.sub-channel{
		display: flex;
		margin: 0 24px 15px 24px;
		position: relative;
	}
	&:last-child{
		border-bottom:none;
	}
	.star{
		width: 105px;
		display: flex;
		position: absolute;
	    right: -24px;
	    top: 5px;
		.blue,.half,.gray{
			width: 15px;
			height: 14px;
			background-size: 15px 14px;
			margin:0 1px 0 0;
			display: inline-block;
		}
		.blue{
			background-image: url("../images/0BF31614-20FC-4D52-BFC5-691D6EAE7B03@2x.png");
		}
		.half{
				background-image: url("../images/331974AE-E488-435E-97BD-0A6849B35E40@2x.png");
		}
		.gray{
			background-image: url("../images/95EA68AB-A5E8-4829-8E05-989D4C143461@2x.png");
		}
	}
	.icon{
		background-size: 27px 24px;
		width: 27px;
		height: 24px;
		text-align: center;
		line-height: 24px;
		margin:0 8px 0 0;
		font-size:9px;
		font-family:'Roboto-Bold';
	}
	.channel-title{
		font-size: 14px;
		color: #121212;
		letter-spacing: 0.5px;
		line-height: 24px;
		font-weight: bold;
		font-family:'Roboto-Medium';
	}
	.icon1{
		color:#FA3D5B;
		background-image: url(../images/index/mobile/order1@3x.png);
	}
	.icon2{
		color:#CA53FF;
		background-image: url(../images/index/mobile/order2@3x.png);
	}
	.icon3{
		color:#FFAA4A;
		background-image: url(../images/index/mobile/order3@3x.png);
	}
	.icon4{
		color:#177FE9;
		background-image: url(../images/index/mobile/order4@3x.png);
	}
	.details{
		font-size: 14px;
		letter-spacing: 0.5px;
		line-height: 24px;
		margin: 0 24px;
	}
	.view-more{
		color: #177FE9;
		letter-spacing: 0.5px;
		text-align: center;
		background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 20%, #FFFFFF 59%, #FFFFFF 100%);
		font-family:'Roboto-Medium';
		height: 40px;
		line-height: 40px;
		text-align: center;
		margin:-14px -24px 0;
		display: block;
		font-size:14px;
		background-size:375px 40px;
		position: relative;
		&.down{
			margin-top:24px;
		}
		i{
			display:inline-block;
			width:10px;
			height:5.8px;
			background-image: url("../images/index/mobile/down@3x.png");
			background-size:10px 5.8px;
			margin-left:8px;
		}
		&.down{
	    	i{
				background-image: url("../images/index/up@2x.png");
	    	}
	    }
	}
	.img-details{
		display: flex;
		overflow: hidden;
		margin:15px 24px 30px 24px;
		a{
			border: 1px solid #E4E4E4;
			border-radius: 10px;
			position: relative;
			margin:0 10px 0 0;
			&:last-child{
				margin:0;
			}
		}
		.img-show{
			width: 100px;
			height: 100px;
			img{
				width: 100px;
				height: 100px;
			}
		}
		.price{
			background: #FA3D5B;
			border-radius: 0 100px 100px 70px;
			color: #fff;
			font-size: 12px;
			padding: 0 12px;
			line-height: 26px;
			height: 26px;
			position: absolute;
			left: 0;
			bottom: 0;
			font-style:normal;
			font-family:'Roboto-Medium';
		}
	}
}
.recommend{
	border-top:1px solid #121212;
	font-size: 16px;
	color: #121212;
	line-height: 16px;
	padding:8px 0 0 0;
	font-family: Roboto-MediumItalic, Roboto;
	margin:0 0 15px 0;
	text-transform: uppercase;
}
.best-list{
	margin:0 0 30px 0;
	li{
		width: 327px;
		height: 40px;
		background: #F9FCFE;
		border-radius: 10px;
		line-height: 40px;
		display: flex;
		margin:0 0 10px 0;
		align-items: center;
		&:last-child{
			margin:0;
		}
	}
	a{
		font-size: 12px;
		font-family: Roboto-Medium, Roboto;
		font-weight: 500;
		color: #177FE9;
		flex:1;
	}
	i{
		width: 8px;
		height: 14px;
		background: url("../images/editors/arrow-down-s-line@2x.png") no-repeat center/8px 14px;
	}
}
.content{
	overflow-x:hidden;
	padding:0 24px;
}
.img-detail{
	margin:0 auto 51px auto;
}